<template>
    <div class="pay-item">
       <van-popup v-model="payShow" position="bottom" :overlay="true" :close-on-click-overlay="closeOverlay">
			<van-nav-bar title="确认付款" left-text="" >
			  	<van-icon name="close" slot="right" @click="$emit('hidePay')" />
			</van-nav-bar>
            <van-row class="text-title">￥{{ total | formatPrice }}</van-row>
			<van-radio-group v-model="radio" @change="payChange">
			  	<van-cell-group>
					<van-cell title='' clickable @click="radioChange(index)" v-for="(orderPayType, index) in orderPayTypeList" :key="index" :class="orderPayType != 'walletpay' ? '' : (Number(total)>Number(walletBalance) ? 'walletpay-disabled' : '')">
							<van-radio :name="index"></van-radio>
							<template slot="title" v-for="item in orderPayTypeShowList" v-if="orderPayType == item.key">
								<img :src="item.iconNormal" />
								<span class="van-cell-text">
									{{ item.name }}
									<i class="available_balance" v-if="orderPayType == 'walletpay'">
										<i v-if="Number(total)<Number(walletBalance)">（可用余额￥{{ walletBalance | formatPrice }}）</i>
										<i v-else>（余额不足）</i>
									</i>
								</span>
							</template>
					</van-cell>
			  	</van-cell-group>
			  	
			</van-radio-group>
			<van-button size="large" @click.native.stop="$emit('pay')">立即付款</van-button>
		</van-popup>
    </div>
</template>

<script>
import { mapGetters, mapActions, mapState } from 'vuex'
export default {
    data () {
        return {
			balance_state: false,
			radio: 0,
			closeOverlay: false,
			orderPayTypeShowList: [
				{
					key: 'alipay',
					name: '支付宝支付',
					iconNormal: require('assets/img/order/icon-alipay.png'),
				},
				{
					key: 'wechatpay',
					name: '微信支付',
					iconNormal: require('assets/img/order/icon-wechatpay.png'),
				},
				{
					key: 'unionpay',
					name: '银联支付',
					iconNormal: require('assets/img/order/icon-unionpay.png'),
				},
				{
					key: 'walletpay',
					name: '余额支付',
					iconNormal: require('assets/img/order/icon-wallet.png'),
					iconDisabled: require('assets/img/order/icon-wallet-disabled.png'),
				}
			]
        }
    },
    props: {
    	payShow: Boolean,
    	total: [String, Number],
    },
    computed: {
		...mapGetters(['contactMobile', 'walletBalance', 'orderPayTypeDefault', 'orderPayTypeList']),
	},
	filters: {
		normalizeOrderTypeIcon (val) {
			return 
		},
	},
    methods: {
    	...mapActions(['getMemberInfo']),
    	payChange(val) {
    		this.$emit('getRadio', val)
    	},
    	radioChange(index) {
    		this.radio = index
    	},
	},
	created () {
		this.getMemberInfo()
    },
    mounted () {
    	
    },
    activated () {

    },
    updated () {

    },
    watch: {
//  	orderPayTypeDefault(newPayTypeDefault,oldPayTypeDefault) {
//  		for(let i in this.orderPayTypeList){
//  			if(newPayTypeDefault == this.orderPayTypeList[i]){
//	    			this.radio = Number(i)
//  			}
//  		}
//  	}
    }
}
</script>

<style lang="scss">
@import "../styles/color.scss";
@import "../styles/mixin.scss";

.van-cell:not(:last-child)::after{
	left: 0;
}
.pay-item{
	.van-popup{
		.text-title{
			font-size: 0.6rem;
			padding: 32px 0;
		}
		.van-nav-bar{
			position: relative;
		}
		.van-button::before{
			
		}
		.van-button--large {
			width: 90%;
			border-radius: 5px;
			background-color: $errorButtonBg;
			color: #FFFFFF;
			margin-bottom: 15px;
		}
		.van-radio .van-icon-checked{
			color: $errorButtonBg;
		}
		.van-icon-alipay{
			color: $errorButtonBg;
			font-size: 0.48rem;
			margin-right: 10px;
		}
		.van-nav-bar__title{
			color: $descColor;
		}
		.van-cell-group{
			margin:0 15px;
			margin-bottom: 150px;
		}
		.van-hairline--top-bottom::after{
			border-top: none;
		}
		.van-cell__title{
			-webkit-box-flex: 6;
		    -webkit-flex: 6;
		    flex: 6;
			img{
				padding: 0;
			    width: 24px;
			    height: 24px;
			    margin-right: 10px;
			}
			.available_balance{
				color: $checkBoxColor;
				font-size: 0.24rem;
			} 
		}
		.van-cell__value {
		    -webkit-box-flex: 1;
		    -webkit-flex: 1;
		    flex: 1;
		}
		.balance_pz{
			position: absolute;
			left: 0;
			top: 0;
			background-color: rgba(255,255,255,.8);
			width: 100%;
			height: 100%;
			z-index: 99;
		}
	}
	.van-nav-bar .van-icon{
		font-weight: 400;
		color: #666666;
		font-size: 0.4rem;
	}
	.walletpay-disabled{
		.van-cell__title{
			color: #E5E5E5;
			.available_balance{
				color: #E5E5E5;
			}
		}
	}
}
@media screen and (max-width: 360px) {
	.pay-item{
		 .Contacts .van-cell__title,.placeOrder .Contacts .van-cell__value{
			font-size: 14px;
		}
		.van-popup .van-cell__value{
			flex: 2;
		}
		 .van-popup .van-cell__title{
			flex: 20;
		}
		.van-popup .van-cell__title img{
			margin-right: 1px;
		}
		.van-popup .van-cell__title .van-cell-text{
			display: inline-block;
		}
	}
}

</style>
